<template>
  <el-dialog title="新增供应商" :visible.sync="dialogVisible" width="900px" :close-on-click-modal="false" :append-to-body="true">
      <el-form :model="formData" size="mini"  ref="formData" label-width="100px" :rules="rules">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item label="供应商名称:" prop="title">
                <el-input v-model="formData.title" placeholder="供应商名称"></el-input>
              </el-form-item>

            </el-col>
            <el-col :span="8">
              <el-form-item label="法人:" prop="legalman">
                <el-input v-model="formData.legalman" placeholder="法人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="信用代码:"  prop="suptaxid">
                <el-input v-model="formData.suptaxid" placeholder="统一信用代码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="注册电话:" prop="mobile">
                <el-input v-model="formData.mobile" placeholder="注册电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col >
              <el-form-item label="注册地址:" prop="address">
                <el-input v-model="formData.address" placeholder="注册地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" >
              <el-form-item label="开户行:" prop="bankname">
                <el-input v-model="formData.bankname" placeholder="开户行名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行账号:"  prop="banknumber">
                <el-input v-model="formData.banknumber" placeholder="银行账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人:" prop="supuser">
                <el-input v-model="formData.supuser" placeholder="联系人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话:" prop="supmobile">
                <el-input v-model="formData.supmobile" placeholder="联系电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="隶属供应商:" prop="accountid">
              	<el-select v-model="formData.accountid" style="width: 100%;" @change="handleAccountChange">
              		<el-option v-for="(item,index) in accounts" :label="item.name" :key="item.index"
              			:value="item.id">
              		</el-option>
              	</el-select>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="备注信息:"  prop="memo">
                <el-input v-model="formData.memo" type="textarea" :rows="3" placeholder="备注信息"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
      	<el-button @click="dialogVisible = false" size="medium">取 消</el-button>
      	<el-button type="primary" size="medium" @click="handleSave">提交申请</el-button>
      </div>
  </el-dialog>
</template>

<script>
  export default{
    data(){
      return{
        formData:{
          id:-1,
          title:'',
          legalman:'',
          titile: '',
          supuser: '',
          suptaxid:'',
          account:'',
          accountid:'',
          mobile:'',
          supmobile: '',
          bankname: '',
          banknumber: '',
          memo:'',
        },
        accounts:[],
        dialogVisible:false,
        rules:{
          title:[{required:true,message:'供应商名称不能为空',trigger:'blur'}],
          accountid:[{required:true,message:'所属账套不能为空',trigger:'blur'}],
         }
      }
    },
    methods:{
      initData(){
        this.formData={
          id:-1,
          title:'',
          supname: '',
          supuser: '',
          address:'',
          supmobile: '',
          accountid:'',
          account:'',
          bankname: '',
          legalman:'',
          suptaxid:'',
          mobile:'',
          banknumber: '',
          memo:''
        }
        this.$nextTick(()=>{
          if(this.$refs.formData){
            this.$refs.formData.resetFields();
          }
        })
        this.loadAccounts();
      },
      loadAccounts(){
        this.axios.post("api/admin/account/list").then((res) => {
        	if (res.status == 200 && res.data.code == 0) {
        		this.accounts = res.data.list;
        	}
        });
      },
      handleAccountChange(accountid){
        var option = this.accounts.filter(function(cur, index, a) {
          if (cur.id == accountid) {
            return cur;
          }
        })[0];
        console.log(option);
        this.formData.accountid = option.id;
        this.formData.account = option.name;
      },
      handleAIGet(){

      },
      loadSuppliers(){
        this.axios.post("api/admin/supplier/list").then((res) => {
        	if (res.status == 200 && res.data.code == 0) {
        		this.suppliers = res.data.list;
        	}
        });
      },
      handleSave(){
        this.$refs.formData.validate(ok=>{
            if(ok){
              this.axios.post("api/admin/buysupplier/create",this.formData).then(res=>{
                  if(res.status==200 && res.data.code==0){
                      this.$message.success({message:res.data.msg,duration:1500,showClose:true})
                      this.dialogVisible=false;
                      this.$emit("closeHandler");
                  }else{
                      this.$message.error({message:res.data.msg,duration:1500,showClose:true})
                  }
              })
            }
        });

      }
    }
  }
</script>

<style>
</style>
